<template>
  <div class="generate-guide-btn">
    <Button type="primary" @click="guideConfirmationVisible=true">快速生成奖状</Button>
    <Modal v-model="guideVisible" class="generate-guide-modal" :mask-closable="false">
      <div class="generate-guide">
        <div class="steps-container">
          <div class="step step-1" v-if="step===1">
            <template-select :baseuser="baseuser" ref="templateSelect"></template-select>
          </div>
          <div class="step step-2" v-if="step===2">
            <theme-setting :baseuser="baseuser" ref="themeSetting"></theme-setting>
          </div>
          <div class="step step-3" v-if="step===3">
            <seal-setting :baseuser="baseuser" ref="sealSetting"></seal-setting>
          </div>
          <div class="step step-4" v-if="step===4">
            <member-setting :baseuser="baseuser" ref="memberSetting" :theme-id="themeId"></member-setting>
          </div>
          <div class="step step-5" v-if="step===5">
            <final-generate :baseuser="baseuser" @generate-complete="generateComplete" ref="finalGenerate" :theme-id="themeId" :theme-name="themeName" :template="template"></final-generate>
          </div>
        </div>
        <div class="footer-buttons" v-if="step < 5">
          <Button type="primary" @click="next()">下一步</Button>
        </div>
      </div>
    </Modal>
    <Modal
      v-model="guideConfirmationVisible"
      class-name="guide-confirmation-modal"
      @on-ok="startGenerateGuide()"
      @on-cancel="guideConfirmationVisible=false"
      ok-text="是"
      cancel-text="否"
    >
      <p>
        欢迎使用电子奖状平台
        <br>是否接受奖状生成引导？
      </p>
    </Modal>
    <Modal v-model="guideCompleteVisible" class="generate-guide-complete-modal" :mask-closable="false">
      <div class="generate-guide">
        <p>
          奖状生成完毕<br>可进入会员中心或奖状中心查看奖状
        </p>
        <div class="footer-buttons">
          <Button type="primary" @click="openTab('member')">会员中心</Button>
          <Button type="primary" @click="openTab('prizeallot')">奖状中心</Button>
          <Button type="primary" @click="guideCompleteVisible = false">关闭</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script src="./generateGuide.js"></script>
<style lang="less" src="./generateGuide.less"></style>